<template>
    <div ref="fullRef" class="test-container">
        <div class="answer-card">
            <div style="width: 100%;height: 40px;
                background: #409EFF;font-size: 14px;
                color: #FFFFFF;line-height: 40px;
                padding-left: 18px;">
                答题卡
            </div>
            <div class="items-view">
                <div class="item" v-for="(item, index) in questions" :key="item.questionId"
                    @click="handleChangeQuestion(index)" :class="item.answer ? 'select' : 'nomal'">
                    {{ index + 1 }}
                </div>
            </div>
            <div class="warning">
                说明 1.题号右方的"*“符号代表该小题尚未选择答案 ,<br />
                2.题号右方的”?"符号代表该小题做过标记。 <br />
                3.选择选项的同时自动保
            </div>
            <div class="bottom-mark">
                <div class="item"><img src="@/assets/test/1.png" />未做</div>
                <div class="item"><img src="@/assets/test/2.png" />已做</div>
                <div class="item"><img src="@/assets/test/3.png" />当前</div>
            </div>
        </div>
        <div class="rightview">
            <div class="question">
                <!-- <ListItem :order="index" :item="item" @update="handleUpdate(item)" @del="handleDelete(item)"></ListItem> -->
            </div>
            <div class="bottom">
                <div class="button-view">
                    <el-button round type="primary" @click="handleLastQuestion" :disabled="currentIndex === 0">
                        上一题</el-button>
                    <div style="margin-left: 47px; margin-right: 47px;">第{{ currentIndex + 1 }}题</div>
                    <el-button round type="primary" @click="handleNextQuestion"
                        :disabled="currentIndex === questions.length - 1"> 下一题</el-button>
                </div>
                <el-button round type="warning" @click="handleNextQuestion"
                    :disabled="currentIndex === questions.length - 1"> 标记</el-button>
            </div>

        </div>
    </div>
</template>

<script setup>
import { watch, ref } from 'vue';
import { ElMessageBox, ElMessage } from "element-plus";
import ListItem from './listItem'
import useFullscreenVisibility from '@/hooks/useFullscreenVisibility.js'
const { proxy } = getCurrentInstance();
const fullRef = ref();
const { enter, exit, screenCutNum, isStop } = useFullscreenVisibility(fullRef, submitForm)
import { uploadAnswer } from '@/api/exam/exame'
const emits = defineEmits(["close", 'paperSuccess']);
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    userInfo: {
        type: Object,
        default: () => { return {} }
    },
    exameId: {
        type: String,
        default: null,
    },
    ques: {
        type: Array,
        default: new Array()
    },
    paperDetails: {
        type: Object,
        default: () => { return {} }
    }
});
// 题目列表
const questions = ref([])
// 显示的问题
const currentIndex = ref(0)
const currentQuestion = ref({})
// 考试时间相关参数
let jiaojuanTime = 0
let timerId = null
const timehour = ref('00')
const timeminutes = ref('00')
const timesecond = ref('00')
// 切屏数据
const screenSet = ref({})
// 
const handleLastQuestion = () => {
    currentIndex.value -= 1
    currentQuestion.value = questions.value[currentIndex.value]
}
const handleNextQuestion = () => {
    currentIndex.value += 1
    currentQuestion.value = questions.value[currentIndex.value]
}
const handleChangeQuestion = (index) => {
    currentIndex.value = index
    currentQuestion.value = questions.value[currentIndex.value]
}
watch(() => props.visible, value => {
    if (value) {
        questions.value = JSON.parse(JSON.stringify(props.ques))
        currentQuestion.value = questions.value[0]
        currentIndex.value = 0
        screenSet.value = props.userInfo.screenSet
        jiaojuanTime = parseInt(props.userInfo.paperTime) * 60
        // 使用定时器
        timerId = setInterval(getTime, 1000)
        isStop(false)
        enter()
    } else {
        clearInterval(timerId)
        timerId = null
    }
});
watch(screenCutNum, value => {
    console.log("🚀 ~ value:", value)
    if (value === screenSet.value.warnCnt) {
        ElMessageBox.confirm(screenSet.value.warnContent, '提示',
            {
                confirmButtonText: '知道了',
                showCancelButton: false,
                type: 'warning',
                appendTo: document.getElementById('startExame')
            })
    }
    if (value >= screenSet.value.screenCnt) {
        ElMessageBox.confirm(screenSet.value.screenContent, '提示',
            {
                confirmButtonText: '交卷',
                showCancelButton: false,
                showClose: false,
                type: 'warning',
                appendTo: document.getElementById('startExame')
            }).
            then(() => {
                submitForm();
            })
    }
})
// 封装时间
function getTime() {
    if (jiaojuanTime === 0) {
        ElMessageBox.confirm('答题时间已到，请教卷', '提示',
            {
                confirmButtonText: '交卷',
                showCancelButton: false,
                type: 'warning',
                appendTo: document.getElementById('startExame')
            }).
            then(() => {
                submitForm();
            })
        return
    }
    // 获取剩余的时间戳 记得转换为秒数
    let count = jiaojuanTime
    // 转换为时分秒
    let h = parseInt(count / 60 / 60 % 24)
    h = h < 10 ? "0" + h : h
    let m = parseInt(count / 60 % 60)
    m = m < 10 ? "0" + m : m
    let s = parseInt(count % 60)
    s = s < 10 ? "0" + s : s
    // 把时分秒写到对应的盒子里面
    timehour.value = h
    timeminutes.value = m
    timesecond.value = s
    jiaojuanTime -= 1
}
// 提交
const handleSubmit = () => {
    ElMessageBox.confirm('是否确定交卷？', '提示',
        {
            confirmButtonText: '交卷',
            cancelButtonText: '继续答题',
            type: 'warning',
            appendTo: document.getElementById('startExame')
        }).
        then(() => {
            submitForm();
        })
}

function submitForm() {
    const answers = questions.value.map((item) => {
        if (item.type === 2) {
            return {
                questionId: item.questionId,
                answer: item.answer
            }
        } else {
            return {
                questionId: item.questionId,
                answer: [item.answer]
            }
        }
    });
    uploadAnswer({
        stuAnswersList: answers,
        exameId: props.exameId,
    })
        .then((res) => {
            if (res.code === 200) {
                ElMessage({
                    message: '交卷成功',
                    type: 'success',
                    appendTo: document.getElementById('startExame')
                })
                emits("paperSuccess");
                isStop(true)
                exit()
            } else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
                    appendTo: document.getElementById('startExame')
                })
            }

        })
        .catch((error) => {
            console.log(error)
            ElMessage({
                message: '交卷失败，请联系管理员',
                type: 'error',
                appendTo: document.getElementById('startExame')
            })
        });
}
const judgeQuestionAnswerList = [
    {
        optionLabel: "正确",
        content: "正确",
    },
    {
        optionLabel: "错误",
        content: "错误",
    },
];
const showFullScreen = () => {

}
defineExpose({
    showFullScreen
})
</script>
<style lang="scss" scoped>
@import './index.scss'
</style>
